<template>
   <el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    class="big-table"
    stripe
    height="1500px">
    <el-table-column prop="seq" label="seq" width="60px"></el-table-column>
    <el-table-column prop="name" label="name"></el-table-column>
    <el-table-column label="value">
      <template #default="scope">
        <div class="value-div">{{ fixed7Float(scope.row.value) }}</div>
      </template>
    </el-table-column><el-table-column prop="description" label="description"  width="160px"></el-table-column>
    <el-table-column label="offset">
      <template #default="scope">{{ formatValue(scope.row.offset) }}</template>
    </el-table-column>
    <el-table-column label="bits">
      <template #default="scope">{{ formatValue(scope.row.bits) }}</template>
    </el-table-column>
    <el-table-column prop="datatype" label="datatype">
      <template #default="scope">{{ formatValue(scope.row.datatype) }}</template>
    </el-table-column>
    <el-table-column prop="process" label="process">
      <template #default="scope">{{ formatValue(scope.row.process) }}</template>
    </el-table-column>
    <el-table-column label="method">
      <template #default="scope">{{ formatValue(scope.row.method) }}</template>
    </el-table-column>
    <el-table-column prop="oribytes" label="oribytes"></el-table-column>
    <el-table-column label="unit" align="center">
      <template #default="scope">{{ formatValue(scope.row.unit) }}</template>
    </el-table-column>
    <el-table-column label="range" align="center">
      <template #default="scope">{{ formatValue(scope.row.range) }}</template>
    </el-table-column>
    <el-table-column label="复制">
      <template #default="scope">
        <el-button
        class="btn"
        text
        title="复制"
        :data-clipboard-text="scope.row.value"
        @click="handleCopy()">
          <el-icon><DocumentCopy /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import { ref } from 'vue';
import { fixed7Float } from '@/comm/index.js';
import { DocumentCopy } from '@element-plus/icons-vue';
import Clipboard from "clipboard";
import {failedNotify, successNotify} from "@/comm/index.js";

export default {
  name: 'TmTable',
  props: {
    tableData: {
      type: Array,
      required: true
    }
  },
  components: {
    DocumentCopy
  },
  methods: {
    fixed7Float (val) {
      return fixed7Float(val);
    },
    handleCopy() {
      let clipboard = new Clipboard('.btn')
      //成功的回调
      clipboard.on('success', () => {
        successNotify('复制成功！')
        clipboard.destroy();// 销毁复制缓存,避免出现复制之前复制的内容
      });
      //失败的回调
      clipboard.on('error', () => {
        failedNotify('复制失败')
      })
    },
    tableRowClassName ({row}) {
      if(row.warning === true) {
        return 'warning-row'
      }
    },
    formatValue (val) {
      let res = val
      if (val === '') {
        res = '--'
      }
      return res
    }
  }
}
</script>

<style lang="scss" scoped>
.el-table .warning-row {
  background: #d6573c;
}
.params-div-pos {
  margin-top: 1em;
  padding-left: 15px;
  width: 98%
}
.big-table {
  font-size: 16px;
}
.value-div {
  color: rgb(77, 238, 234);
}
</style>